[% PROCESS 'config/format.html' %]

[% color_option = BLOCK %]
[% FOREACH color IN config.all_colors %]
<option style="background-color:[% color %];color:[% color %]" value="[% color %]">[% color %]</option>
[% END %]
[% END %]
[% BLOCK color_tr %]
<tr class='misc[% tr_misc %]'>
	<td align='right'><b>[% tr_name %]:</b></td>
	<td>
	<input type='text' name="[% color_name %]" id='[% color_name %]' size='7' maxlength='7' onChange="CHANGEC('[% color_name %]')" /> [% IF c.form.error(color_name, 'REGEX') %]It's not a validated color.[% END %]
	</td>
</tr>
[% END %]

<script>
	function CHANGEC(obj) {
		$('#' + obj).css( { background : $('#' + obj).val() } );
	}
	function show_color(color) {
		$('#showcolor').val(color);
	}
	function LoadStyle() {
	    var stylename = $('#style_template').val();
	    $.getJSON("[% c.config.dir.static %]/css/style/" + stylename + ".json",
            function(data) {
                $.each(data, function(i,item){
                    $('#' + i).val(item);
                    $('#' + i).css( { 'background': item } );
                } );
            } );
	}
	[% IF has_style %]
        $(document).ready(function() {
            LoadStyle();
        } );
    [% END %]
</script>

[% USE FillInForm %]
[% FILTER fillinform fdat => c.req.params %]

[% WRAPPER 'forumadmin/bar.html' %]

<div class='one'>
<form method='post'>
<table align='center'>
    <tr class='title'><td colspan='2'>Style Setting</td></tr>
    <tr class='misc1'><td align='right'>Choose one existing Style</td><td>
        <select id='style_template'>
            [% IF has_style %]
            <option value="forum[% forum.forum_id %]">My Style</option>
            [% END %]
            <option value='black'>Black</option>
            <option value='green'>Green</option>
        </select><input type='button' value='Show' onclick='LoadStyle()' /></td></tr>
    [% TRY %]
    [% css_file = c.config.home _ '/root/static/css/style/forum' _ forum.forum_id _ '.css' %]
    [% USE File( css_file ) %]
    <tr class='title'><td colspan='2'><a href='/forumadmin/[% forum.forum_id %]/del_style'>Delete Style, Restore Default</a></td></tr>
    [% CATCH File %]
    [% END %]
    <tr class='title'><td colspan='2'>Edit Style</td></tr>
    <tr class='misc1'>
		<td align='right'><b>Get Color Code</b></td>
		<td><select onchange="show_color(this.options[this.selectedIndex].value)" name="color">
		    [% color_option %]
		    </select> <input type='text' name="showcolor" id='showcolor' size='7'>
		</td>
    </tr>
    [% PROCESS color_tr tr_misc = 2 tr_name = 'BackGround Color' color_name = 'bg_color' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Body Font Color' color_name = 'bg_fontcolor' %]
    <tr class='misc2'>
		<td align='right'><b>BackGround Image:</b></td>
		<td>
		<input type='text' name="bg_image" id='bg_image' size='60' /> <a href='/help/background'><img src='[% c.config.dir.images %]/site/help.gif' width='16' height='16' align='absmiddle' /></a>
		[% IF c.form.error('bg_image') %]It's not a validated Image URL.[% END %]
		</td>
    </tr>
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Normal Link' color_name = 'link' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Unvisited Link' color_name = 'alink' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Visited Link' color_name = 'vlink' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Hover Link' color_name = 'hlink' %]
    <tr class='misc1'>
		<td align='right'><b>Table Width:</b></td>
		<td>
		<input type='text' name="tablewidth" id='tablewidth' size='4' maxlength='4' />%
		[% IF c.form.error(tablewidth) %]Table Width should be 70 - 100.[% END %]
		</td>
    </tr>
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Table Border Color' color_name = 'tablebordercolor' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Title Background Color' color_name = 'titlecolor' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Table Font Color' color_name = 'titlefont' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Forum Background Color One' color_name = 'forumcolor1' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Forum Font Color One' color_name = 'forumfont1' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Forum Background Color Two' color_name = 'forumcolor2' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Forum Font Color Two' color_name = 'forumfont2' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Reply Background Color One' color_name = 'replycolor1' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Reply Font Color One' color_name = 'replyfont1' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Reply Background Color Two' color_name = 'replycolor2' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Reply Font Color Two' color_name = 'replyfont2' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Others\' Background Color One' color_name = 'misccolor1' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Others\' Font Color One' color_name = 'miscfont1' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Others\' Background Color Two' color_name = 'misccolor2' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Others\' Font Color Two' color_name = 'miscfont2' %]
    [% PROCESS color_tr tr_misc = 1 tr_name = 'Highlight Color' color_name = 'highlight' %]
    [% PROCESS color_tr tr_misc = 2 tr_name = 'Semi-Highlight Color' color_name = 'semilight' %]
    <tr class='misc1'>
		<td align='right'> </td>
		<td>
		<input type='submit' value='GO!' />
		</td>
    </tr>
</table>
</form>
</div>

[% END %]

[% END %]